<template>
	<div class="wrap" v-loading="loading" element-loading-text="等下,我正在请求" element-loading-spinner="el-icon-loading">
		<basic-opt :has_left="true">
			<template #search>
				<div class="opt-item">
					<el-input class="w-ipt" placeholder="请输入姓名进行筛选" suffix-icon="el-icon-search" v-model="search.search"
						@keydown.enter="getSearchData" size="medium">
					</el-input>
				</div>
				<div class="opt-item">
					<el-button @click="getSearchData" size="medium">搜索</el-button>
				</div>
				<div class="opt-item">
					<reset-search></reset-search>
				</div>
			</template>
			<template #add>
				<div class="opt-item">
					<el-button @click="onPushAll" icon="el-icon-circle-plus-outline" type="primary" size="medium">推送全部</el-button>
				</div>
			</template>
		</basic-opt>

		<div class="table-box">
			<el-table :data="data" stripe :header-cell-style="header_cell_style" :max-height="table_max_height">
				<el-table-column prop="id" label="ID"></el-table-column>
				<el-table-column prop="name" label="姓名"></el-table-column>
				<el-table-column prop="number" label="身份证号"></el-table-column>
				<el-table-column prop="alert_type" label="告警分类"></el-table-column>
				<el-table-column prop="href" label="人脸图片">
					<template #default="scope">
						<el-popover placement="left" trigger="click">
							<img :src="scope.row.href" style="max-width:800px;max-height:800px;" />
							<template #reference>
								<img :src="scope.row.href" style="max-width:180px;max-height:80px;">
							</template>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="300px">
					<template #default="scope">
						<el-button @click="onPushOne(scope.row)" type="info" plain size="mini">推送人脸</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<page-component @pageChanged="onPageChanged"></page-component>
	</div>
  <!--  mobile  -->
  <div class="mobile-wrap" v-loading="loading" element-loading-text="等下,我正在请求" element-loading-spinner="el-icon-loading">
    <div class="mobile-search-box">
      <el-input class="w-ipt" placeholder="请输入姓名进行筛选" suffix-icon="el-icon-search" v-model="search.search"
                @keydown.enter="getSearchData" size="medium">
      </el-input>
      <el-button @click="getSearchData" size="medium">搜索</el-button>
    </div>
    <div class="moblie-table-box">
      <el-table :data="data" stripe :header-cell-style="header_cell_style" :max-height="mobile_table_max_height">
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="number" label="身份证号" width="200px"></el-table-column>
        <el-table-column prop="alert_type" label="告警分类" width="150px"></el-table-column>
        <el-table-column prop="href" label="人脸图片">
          <template #default="scope">
            <el-popover placement="left" trigger="click">
              <img :src="scope.row.href" style="max-width:800px;max-height:800px;" />
              <template #reference>
                <img :src="scope.row.href" style="max-width:180px;max-height:80px;">
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100px">
          <template #default="scope">
            <el-button @click="onPushOne(scope.row)" type="info" plain size="mini">推送人脸</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <page-component @pageChanged="onPageChanged"></page-component>
  </div>
</template>

<script>
	import API from '@/api/index.js'
	import mixin from '@/mixin.js'

	export default {
		name: 'upload',
		mixins: [mixin],
		data() {
			return {
				search: {
					search: '',
				},
				push_form: {
					id: ''
				}
			}
		},
		mounted() {
			this.getData();
		},
		methods: {
			async getData() {
				let self = this;
				self.loading = true;
				try {
					let params = {
						search: self.search.search ? self.search.search : ''
					};
					self.addPageInfo(params);
					let res = await API.getDangerFaces(params.pageNumber, params.pageSize, params.search);
					self.loading = false;
					self.onGotPageData(res);
				} catch (err) {
					self.loading = false;
				}
			},
			// 推送全部人脸
			onPushAll() {
				let self = this;
				self.$confirm('是否推送全部可疑人脸？', '确认信息', {
						distinguishCancelAndClose: true,
						confirmButtonText: '确定',
						cancelButtonText: '关闭',
						showClose: false,
						closeOnClickModal: false
					})
					.then(() => {
						API.pushAll().then(res => {
							console.log(res)
							self.$message.success("推送成功");
						});
					})
					.catch(() => {
					});
			},
			onPushOne(row) {
				let self = this;
				self.push_form.id = row.id;
				API.pushAll(self.push_form).then(res => {
					console.log(res)
					self.$message.success("推送成功");
				});
			}
		},
	}
</script>
